<template>
  <div class="form_item">
    <div class="title-wrap">
        <div class="title">{{ title }}</div>
        <div class="sub-title">{{ subtitle }}</div>
    </div>
    <div class="input_wrap"><slot></slot></div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'
import { Menu } from 'ant-design-vue'

@Component({
  components: {
    Menu
  },
  props: {
    title: String
  }
})
export default class Nav extends Vue {
  @Prop()
  title!: String

  @Prop()
  subtitle!: String
}
</script>

<style lang="less" scoped>
@import '../styles/variables';
.form_item {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      margin-bottom: 20px;
      color: @p-color;
      font-family: @fre-font;
    }
    .sub-title {
      font-size: 14px;
      margin-bottom: 20px;
      color: fade(@p-color,60);
      font-family: @fre-font;
    }
  }
  .input_wrap {
    // background: #fff;
    border-radius: 12px;
    // height: 60px;
  }
}
</style>
